import React, { Component } from 'react'


import { 
  ContentTitle,
  Content,
  QuestionWrapper,
  QuestionList,
  QuestionLayout,
  CommentWrapper
} from '../style'

import { Input, Button, Avatar,Pagination,message  } from 'antd';
const { TextArea } = Input;

export default class BBS extends Component {
  constructor(props) {
    super(props)
    this.state = {
      question: '',
      page: 1,
      pageSize: 15,
      reply: {
        replyName: '',
        replyId: '',
        toId: ''
      },
      replyContent: '',
      showAll: []
    }
  }

  // 提交提问
  submitBBS() {
    if(!this.state.question) {
      message.error('内容不能为空！');
      return;
    }
    let obj = {}
    if(this.props.video.get('type') === 'JoyActivity') {
      obj.actId = this.props.video.get('actId')
    }else {
      obj.videoId = this.props.video.get('videoId')
    }
    obj.content = this.state.question
    this.props.addComment(obj)

    let temp = {}
    temp.page = this.state.page
    temp.pageSize = this.state.pageSize
    if(this.props.video.get('type') === 'JoyActivity') {
      temp.actId = this.props.video.get('actId')
    }else {
      temp.videoId = this.props.video.get('videoId')
    }
    setTimeout(()=> {
      this.props.getComment(temp)
    }, 1000)
    this.setState({
      question: ''
    })
  }

  // 显示回答条数
  renderReplyCount(item) {
    let arr = []
    if(!this.isShow(item)) {
      item.get('replys').map((comment, idx) => {
        if(idx<3) {
          arr.push(
            <div className="child-comment" key={comment.get('id')}>
              {/* <img src={comment.get('photo')} /> */}
              {comment.get('photo')? <img className="avatar" style={{width: '40px', height: '40px'}} src={comment.get('photo')} /> : <Avatar className="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
              <div style={{marginLeft: '46px'}}>
                <p style={{fontWeight: 'bold'}}>{comment.get('personName')} {comment.get('replyTo') ? <span><span style={{color: '#8BCA34'}}>@ </span>{comment.get('replyToName')}</span> : ''} : <span style={{fontWeight: 'normal', wordBreak: 'break-all', wordWrap: 'break-word', overflow: 'hidden'}}>{comment.get('content')}</span></p>
                <p>{this.renderTime(comment.get('createTime'))} <a style={{color: comment.get('id') === this.state.reply.toId ? '' : '#333', marginLeft: '10px'}} onClick={this.replyTo.bind(this, comment, item.get('id'))}>回复</a></p>
              </div>
            </div>
          )
        }
      })
    }else {
      item.get('replys').map(comment => {
        arr.push(
          <div className="child-comment" key={comment.get('id')}>
            {/* <img src={comment.get('photo')} /> */}
            {comment.get('photo')? <img className="avatar" src={comment.get('photo')} style={{width: '40px', height: '40px'}} /> : <Avatar className="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
            <div style={{marginLeft: '46px'}}>
              <p style={{fontWeight: 'bold'}}>{comment.get('personName')} {comment.get('replyTo') ? <span><span style={{color: '#8BCA34'}}>@ </span>{comment.get('replyToName')}</span> : ''} : <span style={{fontWeight: 'normal',wordBreak: 'break-all', wordWrap: 'break-word', overflow: 'hidden' }}>{comment.get('content')}</span></p>
              <p>{this.renderTime(comment.get('createTime'))} <a style={{color: comment.get('id') === this.state.reply.toId ? '' : '#333', marginLeft: '10px'}} onClick={this.replyTo.bind(this, comment, item.get('id'))}>回复</a></p>
            </div>
          </div>
        )
      })
    }
    return arr
  }

  // 时间格式
  renderTime(time) {
    let t = new Date(time);
    let m = t.getMonth() + 1;
    let d = t.getDate();
    let h = t.getHours();
    let mm = t.getMinutes()
    return m + '月' + d + '日 ' + h + ':' + mm
  }

  // 回复
  replyQuestion(v) {
    let obj = this.state.reply
    obj.replyName =  v.get('personName')
    obj.replyId = v.get('id')
    obj.toId = ''
    this.setState({
      reply: obj,
      replyContent: ''
    })
  }

  // 回复回答
  replyTo(v, id) {
    let obj = this.state.reply
    obj.replyId = id
    obj.replyName =  v.get('personName')
    obj.toId = v.get('id')
    this.setState({
      reply: obj
    })
  }

  getQueryStr(name)
  {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'); 
      var r = this.props.location.search.substr(1).match(reg);
      if (r != null && r != undefined) {
        return unescape(r[2]);
      }
      return null;
  }

  // 提交回复
  saveReplyQuestion() {
    if(!this.state.replyContent) {
      message.error('内容不能为空！');
      return;
    }
    this.props.reply({
      content: this.state.replyContent,
      issueId: this.state.reply.replyId,
      roomId: this.getQueryStr('roomId'),
      to: this.state.reply.toId
    })
    setTimeout(()=> {
      let obj = {
        page: this.state.page,
        pageSize: this.state.pageSize
      }
      this.props.video.get('type') === 'JoyActivity' ? obj.actId = this.props.video.get('actId') : obj.videoId = this.props.video.get('videoId')
      this.props.getComment(obj)
      let re = this.state.reply
      re.replyName = ''
      re.replyId = ''
      this.setState({
        reply: re,
        replyContent: ''
      })
    },300)
  }
  
  // 收起
  showClose(item) {
    let obj = []
    this.state.showAll.map(it => {
      if(it !== item.get('id')) {
        obj.push(it)
      }
    })
    let re = this.state.reply
    re.replyName = ''
    re.replyId = ''
    this.setState({
      showAll: obj,
      reply: re,
      replyContent: ''
    })
  }
  // 页码跳转
  changePage(page) {
    let obj = {}
    obj.page = page
    obj.pageSize = this.state.pageSize
    if(this.props.video.get('type') === 'JoyActivity') {
      obj.actId = this.props.video.get('actId')
    }else {
      obj.videoId = this.props.video.get('videoId')
    }
    if(this.props.type && this.props.type==='live') {
      this.setState({
        page
      }, ()=> this.props.getAllComment(obj))
    }else {
      this.setState({
        page
      }, ()=> this.props.getComment(obj))
    }
  }

  // 回复某一个用户
  changeItem(item) {
    let obj = this.state.showAll
    obj.push(item.get('id'))
    this.setState({
      showAll: obj
    })
  }

  // 判断是否显示
  isShow(item) {
    let show = false
    if(item.get('replyNum')>3) {
      this.state.showAll.map(obj => {
        if(obj === item.get('id')) {
          show = true
        }
      })
    }else {
      show = false
    }
    return show
  }


  render() {
    return (<QuestionWrapper>
            <ContentTitle>
              解疑社区
            </ContentTitle>
            <Content>
              <p>本社区旨在加强老师和学生的交流互动。学生如有关于本次课程的疑难问题可以在此和老师或者其他学生展开交流。</p>
              <TextArea rows={4} placeholder="如有任何问题都可留言，我们回尽快回复。"  value={this.state.question} onChange={(val)=> this.setState({question: val.target.value})}/>
              <Button type="primary" style={{marginTop: '20px', marginBottom: '20px'}} onClick={()=> this.submitBBS()}>提交问题</Button>
              <QuestionList>
                {
                  this.props.comment.get('data') ? this.props.comment.get('data').map(item => {
                    return (
                      <QuestionLayout key={item.get('id')}>
                        {item.get('photo')? <img className="avatar" src={item.get('photo')} /> : <Avatar className="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                        <CommentWrapper>
                          <p style={{fontWeight: 'bold'}}>{item.get('personName')}</p>
                          <p className="time">{this.renderTime(item.get('createTime'))}</p>
                          <p className="content" style={{wordBreak: 'break-all', wordWrap: 'break-word', overflow: 'hidden'}}>{item.get('content')}</p>
                          {
                            this.renderReplyCount(item)
                          }
                          <div className="reply-btn">
                            <span>共{item.get('replyNum')}条回复</span>
                            {
                              this.isShow(item) ? <a style={{marginLeft: '20px'}} onClick={this.showClose.bind(this, item)}>收起</a> : <a style={{marginLeft: '20px'}} onClick={this.changeItem.bind(this, item)}>点击查看</a>
                            }
                            <Button className="reply" onClick={this.replyQuestion.bind(this, item)}>我也说一句</Button>
                            {
                              this.state.reply.replyId === item.get('id') ?  <div>
                              <TextArea rows={4} placeholder={'回复' + this.state.reply.replyName} value={this.state.replyContent} onChange={(val) =>this.setState({replyContent: val.target.value})}/>
                              <Button type="primary" style={{marginTop: '10px'}} onClick={this.saveReplyQuestion.bind(this)}>发表</Button>
                            </div> : ''
                            }

                          </div>
                        </CommentWrapper>
                      </QuestionLayout>
                    )
                  }): ''
                }
              </QuestionList>
              <div style={{textAlign: 'center', marginTop: '20px'}}>
                <Pagination current={this.props.comment.get('page') ? this.props.comment.get('page'): 1 } total={this.props.comment.get('total') ? this.props.comment.get('total') : 1}  pageSize={this.props.comment.get('pagesize') ? this.props.comment.get('pagesize') : 15} onChange={(page)=> this.changePage(page)}/>
              </div>
            </Content>
          </QuestionWrapper>)
  }
}